<template>
  <div class="home_left_box base_box">
    <div class="home_left_box_top">
      <div class="base_title">{{ props.mainTitle }}</div>
      <div class="base_all base_small" @click="clickSubTitle">{{ props.subTitle }}</div>
    </div>
    <n-spin :show="loading">
      <n-empty v-if="!loading && props.data.length === 0" description="暂无数据" />
      <div v-if="loading" class="skeleton-container">
        <div v-for="n in 8" :key="n" class="skeleton-item">
          <div class="skeleton-image"></div>
          <div class="skeleton-text"></div>
        </div>
      </div>
      <OneVideo 
        v-else
        :data="props.data" 
        :clickListOne="props.clickListOne"
        :styleOne="props.styleOne"
        :styleMain="props.styleMain"
      />
    </n-spin>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {  NEmpty, NSpin } from 'naive-ui';
import OneVideo from './OneVideo.vue';
const loading = ref(false);

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  mainTitle: {
    type: String,
    default: ''
  },
  subTitle: {
    type: String,
    default: '查看全部>>'
  },
  clickSubTitle: {
    type: Function,
    default: () => {}
  },
  clickListOne: {
    type: Function,
    default: () => {}
  },
  styleOne:{
    type: Object,
    default: () => {}
  },
  styleMain:{
    type: Object,
    default: () => {}
  }
});
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.home_left_box {
  &_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    
    .base_all {
      text-decoration: none;
      padding: 4px 8px;
      border-radius: 4px;
      transition: all 0.3s;
      cursor: pointer;
      
      &:hover {
        color: $baseColor;
        background: rgba($baseColor, 0.1);
      }
    }
  }
}

.skeleton-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22%, 1fr));
  gap: 0.8rem;
}

.skeleton-item {
  aspect-ratio: 3/4;
  background: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
  animation: pulse 1.5s infinite;
  
  .skeleton-image {
    width: 100%;
    height: 70%;
    background: #e0e0e0;
  }
  
  .skeleton-text {
    margin: 10px;
    height: 15px;
    background: #e0e0e0;
    border-radius: 4px;
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
</style>
